<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>矩形:</h3>
请输入长:<input type="number" id="a" /><br />
请输入宽:<input type="number" id="b" /><br />
<button type="button" onclick="calculate1()" value="计算"/>计算</button> <br />
计算面积为:<span id="result1"></span><br />
计算周长为:<span id="result2"></span><br />
<hr/>
<h3>圆形:</h3>
请输入半径:<input type="number" id="r" /><br />
<button type="button" onclick="calculate2()" value="计算"/>计算</button> <br />
计算面积为:<span id="result3"></span><br />
计算周长为:<span id="result4"></span><br />
</body>
<script src="js/jquery-1.11.0.js"></script>
<script>
    var area = 0;   //面积
    var perimeter = 0;   //周长
    function calculate1() {
        var a =$("#a").val();
        var b = $("#b").val();

            area = a*b;
            perimeter = 2*a+2*b;

            $("#result1").html(area);
            $("#result2").html(perimeter);

    }
    function calculate2() {
        var r =$("#r").val();
        area = 3.14*r*r;
        perimeter =2*3.14*r ;
        console.log(area);
        $("#result3").html(area);
        $("#result4").html(perimeter);

    }
</script>
</html>